
<!--<script type="text/javascript" src="../js/Jssor_Slider/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/Jssor_Slider/js/jssor.core.js"></script>
<script type="text/javascript" src="../js/Jssor_Slider/js/jssor.utils.js"></script>
<script type="text/javascript" src="../js/Jssor_Slider/js/jssor.slider.js"></script>-->

<script type="text/javascript" src="js/Jssor_Slider/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/Jssor_Slider/js/jssor.core.js"></script>
<script type="text/javascript" src="js/Jssor_Slider/js/jssor.utils.js"></script>
<script type="text/javascript" src="js/Jssor_Slider/js/jssor.slider.js"></script>

<div id="slider1_container" style="position: relative; width: 500px;height: 300px;
     margin-left: 100px;margin-top: -200px;">

    <!-- Loading Screen -->
    <div u="loading" style="position: absolute; top: 0px; left: 0px;">
        <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
             background-color: #000; top: 0px; left: 0px;width: 100%;height:100%;">
        </div>
        <div style="position: absolute; display: block; background: url(../js/Jssor_Slider/img/loading.gif) no-repeat center center;
             top: 0px; left: 0px;width: 100%;height:100%;">
        </div>
    </div>

    <!-- Slides Container -->
    <!--đây là cái khung của cái slider-->
    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
         overflow: hidden;border: 1px solid black;">
        <div>
            <img u=image src="js/Jssor_Slider/img/landscape/01.jpg" />
            <div u="thumb">Do you notice it scales while window resize?</div>
            <div u="caption" t="L" style="position: absolute; top: 20px; left: 20px; width: 200px; height: 30px; color: #ffffff; font-size: 20px; line-height: 30px;">What about caption?</div>
            <div u="caption" t="CLIP|LR" style="position: absolute; top: 135px; left: 100px; width: 400px; height: 30px; color: #ffffff; font-size: 26px; line-height: 30px; text-align: center;">This is 'CLIP|LR' caption transition</div>
        </div>
        <div>
            <img u=image src="js/Jssor_Slider/img/landscape/02.jpg" />
            <div u="thumb">Do you know this is text format thumbnail?</div>
            <div u="caption" t="MCLIP|L" style="position: absolute; top: 105px; left: 100px; width: 400px; height: 30px; color: #ffffff; font-size: 26px; line-height: 30px; text-align: center;">This is 'MCLIP|L' caption transition</div>
            <div u="caption" t="LISTH|L" style="position: absolute; top: 165px; left: 100px; width: 400px; height: 30px; color: #ffffff; font-size: 26px; line-height: 30px; text-align: center;">This is 'LISTH|L' caption transition</div>
        </div>
        <div>
            <img u=image src="js/Jssor_Slider/img/landscape/03.jpg" />
            <div u="thumb">Do you notice the navigator is in multiline?</div>
            <div u="caption" t="WAVE|L" t2="T" style="position: absolute; top: 135px; left: 450px; width: 100px; height: 30px; color: #ffffff; font-size: 26px; line-height: 30px; text-align: center;">WAVE|L</div>
            <div u="caption" t="WAVE|L" t2="T" d="-1150" style="position: absolute; top: 135px; left: 250px; width: 100px; height: 30px; color: #ffffff; font-size: 26px; line-height: 30px; text-align: center;">WAVE|L</div>
            <div u="caption" t="WAVE|L" t2="T" d="-1150" style="position: absolute; top: 135px; left: 50px; width: 100px; height: 30px; color: #ffffff; font-size: 26px; line-height: 30px; text-align: center;">WAVE|L</div>
        </div>
        <div>
            <img u=image src="js/Jssor_Slider/img/landscape/04.jpg" />
            <div u="thumb">Do you like navigator to act by mouse hover?</div>
            <div u="caption" t="JUMPDN|R" t2="B" style="position: absolute; top: 135px; left: 50px; width: 100px; height: 30px; color: #ffffff; font-size: 26px; line-height: 30px; text-align: center;">JUMPDN|R</div>
            <div u="caption" t="JUMPDN|R" t2="B" d="-850" style="position: absolute; top: 135px; left: 250px; width: 100px; height: 30px; color: #ffffff; font-size: 26px; line-height: 30px; text-align: center;">JUMPDN|R</div>
            <div u="caption" t="JUMPDN|R" t2="B" d="-850" style="position: absolute; top: 135px; left: 450px; width: 100px; height: 30px; color: #ffffff; font-size: 26px; line-height: 30px; text-align: center;">JUMPDN|R</div>
        </div>
        <div>
            <img u=image src="js/Jssor_Slider/img/landscape/01.jpg" />
            <div u="thumb">Do you notice arrows appear when mouse over?</div>
            <div u="caption" t="DDG|TR" style="position: absolute; top: 135px; left: 100px; width: 150px; height: 30px; color: #ffffff; font-size: 26px; line-height: 30px; text-align: center;">DDG|TR</div>
            <div u="caption" t="DODGEDANCE|L" style="position: absolute; top: 135px; left: 300px; width: 250px; height: 30px; color: #ffffff; font-size: 26px; line-height: 30px; text-align: center;">DODGEDANCE|L</div>
        </div>
        <div>
            <img u=image src="js/Jssor_Slider/img/landscape/02.jpg" />
            <div u="thumb">Do you notice the slideshow plays outside?</div>
            <div u="caption" t="FLUTTER|L" style="position: absolute; top: 135px; left: 100px; width: 150px; height: 30px; color: #ffffff; font-size: 26px; line-height: 30px; text-align: center;">FLUTTER|L</div>
            <div u="caption" t="TORTUOUS|VB" style="position: absolute; top: 135px; left: 300px; width: 250px; height: 30px; color: #ffffff; font-size: 26px; line-height: 30px; text-align: center;">TORTUOUS|VB</div>
        </div>
        <div>
            <img u=image src="js/Jssor_Slider/img/landscape/03.jpg" />
            <div u="thumb">Do you know there are <a href="../development/tool-slideshow-transition-viewer.html">360+ slideshow transitions</a>?</div>
            <div u="caption" t="FADE" style="position: absolute; top: 135px; left: 100px; width: 150px; height: 30px; color: #ffffff; font-size: 26px; line-height: 30px; text-align: center;">FADE</div>
            <div u="caption" t="ZMF|10" style="position: absolute; top: 135px; left: 300px; width: 250px; height: 30px; color: #ffffff; font-size: 26px; line-height: 30px; text-align: center;">ZMF|10</div>
        </div>
        <div>
            <img u=image src="js/Jssor_Slider/img/landscape/04.jpg" />
            <div u="thumb">Do you know there are <a href="../development/tool-caption-transition-viewer.html">390+ caption transitions</a>?</div>
            <div u="caption" t="RTT|10" style="position: absolute; top: 135px; left: 100px; width: 150px; height: 30px; color: #ffffff; font-size: 26px; line-height: 30px; text-align: center;">RTT|10</div>
            <div u="caption" t="RTTL|BR" style="position: absolute; top: 135px; left: 300px; width: 250px; height: 30px; color: #ffffff; font-size: 26px; line-height: 30px; text-align: center;">RTTL|BR</div>
        </div>
    </div>

    <!-- ThumbnailNavigator Skin Begin -->
    <div u="thumbnavigator" class="slider1-T" style="position: absolute; bottom: 0px; left: 0px; height:60px; width:600px;">
        <div style="filter: alpha(opacity=40); opacity:0.4; position: absolute; display: block;
             background-color: #ffffff; top: 0px; left: 0px; width: 100%; height: 100%;">
        </div>
        <div u="slides">
            <div u="prototype" style="POSITION: absolute; WIDTH: 600px; HEIGHT: 60px; TOP: 0; LEFT: 0;">
                <thumbnailtemplate style="font-family: verdana; font-weight: normal; POSITION: absolute; WIDTH: 100%; HEIGHT: 100%; TOP: 0; LEFT: 0; color:#000; line-height: 60px; font-size:20px; padding-left:10px;"></thumbnailtemplate>
            </div>
        </div>
    </div>
    <style>
        .jssorb01 div, .jssorb01 div:hover, .jssorb01 .av
        {
            filter: alpha(opacity=70);
            opacity: .7;
            overflow:hidden;
            cursor: pointer;
            border: #000 1px solid;
        }
        .jssorb01 div { background-color: gray; }
        .jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
        .jssorb01 .av { background-color: #fff; }
        .jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }
    </style>
    <!-- bullet navigator container -->
    <div u="navigator" class="jssorb01" style="position: absolute; bottom: 16px; right: 10px;
         width: 100px;left: 500px;">
        <!-- bullet navigator item prototype -->
        <div u="prototype" style="POSITION: absolute; WIDTH: 12px; HEIGHT: 12px;"></div>
    </div>
    <style>
        .jssora05l, .jssora05r, .jssora05ldn, .jssora05rdn
        {
            position: absolute;
            cursor: pointer;
            display: block;
            background: url(js/Jssor_Slider/img/a17.png) no-repeat;
            overflow:hidden;
        }
        .jssora05l { background-position: -10px -40px; }
        .jssora05r { background-position: -70px -40px; }
        .jssora05l:hover { background-position: -130px -40px; }
        .jssora05r:hover { background-position: -190px -40px; }
        .jssora05ldn { background-position: -250px -40px; }
        .jssora05rdn { background-position: -310px -40px; }
    </style>
    <!-- Arrow Left -->
    <span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 123px; left: 8px;">
    </span>
    <!-- Arrow Right -->
    <span u="arrowright" class="jssora05r" style="width: 60px; height: 40px; top: 123px; right: 8px;left: 560px;">
    </span>
</div>

<script>
    jQuery(document).ready(function($) {
        var _SlideshowTransitions = [
            //Fade Fly in R
            {$Duration: 1200, $During: {$Left: [0.3, 0.7]}, $FlyDirection: 2, $Easing: {$Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear}, $ScaleHorizontal: 0.3, $Opacity: 2, $Outside: true}
            //Fade Fly out L
            , {$Duration: 1200, $SlideOut: true, $FlyDirection: 1, $Easing: {$Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear}, $ScaleHorizontal: 0.3, $Opacity: 2, $Outside: true}
        ];

        var _CaptionTransitions = [];
        _CaptionTransitions["L"] = {$Duration: 800, $FlyDirection: 1, $Easing: $JssorEasing$.$EaseInCubic};
        _CaptionTransitions["R"] = {$Duration: 800, $FlyDirection: 2, $Easing: $JssorEasing$.$EaseInCubic};
        _CaptionTransitions["T"] = {$Duration: 800, $FlyDirection: 4, $Easing: $JssorEasing$.$EaseInCubic};
        _CaptionTransitions["B"] = {$Duration: 800, $FlyDirection: 8, $Easing: $JssorEasing$.$EaseInCubic};
        _CaptionTransitions["TL"] = {$Duration: 800, $FlyDirection: 5, $Easing: $JssorEasing$.$EaseInCubic};
        _CaptionTransitions["TR"] = {$Duration: 800, $FlyDirection: 6, $Easing: $JssorEasing$.$EaseInCubic};
        _CaptionTransitions["BL"] = {$Duration: 800, $FlyDirection: 9, $Easing: $JssorEasing$.$EaseInCubic};
        _CaptionTransitions["BR"] = {$Duration: 800, $FlyDirection: 10, $Easing: $JssorEasing$.$EaseInCubic};

        _CaptionTransitions["CLIP|LR"] = {$Duration: 600, $Clip: 3, $Easing: $JssorEasing$.$EaseInOutCubic};
        _CaptionTransitions["MCLIP|L"] = {$Duration: 600, $Clip: 1, $Move: true, $Easing: $JssorEasing$.$EaseInOutCubic};
        _CaptionTransitions["LISTH|L"] = {$Duration: 1000, $Clip: 1, $FlyDirection: 1, $Easing: $JssorEasing$.$EaseInOutCubic, $ScaleHorizontal: 0.8, $ScaleClip: 0.8, $During: {$Left: [0.4, 0.6], $Clip: [0, 0.4]}};
        _CaptionTransitions["WAVE|L"] = {$Duration: 1300, $FlyDirection: 5, $Easing: {$Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseInWave}, $ScaleVertical: 0.3, $Round: {$Top: 2.5}};
        _CaptionTransitions["JUMPDN|R"] = {$Duration: 1000, $FlyDirection: 6, $Easing: {$Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseOutJump}, $ScaleHorizontal: 0.6, $ScaleVertical: 0.4, $Round: {$Top: 1.5}};
        _CaptionTransitions["DDG|TR"] = {$Duration: 1200, $Clip: 15, $FlyDirection: 6, $Easing: {$Left: $JssorEasing$.$EaseInJump, $Top: $JssorEasing$.$EaseInJump, $Clip: $JssorEasing$.$EaseSwing}, $ScaleHorizontal: 0.3, $ScaleVertical: 0.3, $During: {$Left: [0, 0.8], $Top: [0, 0.8]}, $Round: {$Left: 0.8, $Top: 0.8}};
        _CaptionTransitions["DODGEDANCE|L"] = {$Duration: 1200, $Clip: 15, $FlyDirection: 9, $Easing: {$Left: $JssorEasing$.$EaseInJump, $Top: $JssorEasing$.$EaseInJump, $Clip: $JssorEasing$.$EaseOutQuad}, $ScaleHorizontal: 0.3, $ScaleVertical: 0.3, $During: {$Left: [0, 0.8], $Top: [0, 0.8]}, $Round: {$Left: 0.8, $Top: 2.5}};
        _CaptionTransitions["FLUTTER|L"] = {$Duration: 600, $FlyDirection: 9, $Easing: {$Left: $JssorEasing$.$EaseLinear, $Top: $JssorEasing$.$EaseOutWave, $Opacity: $JssorEasing$.$EaseLinear}, $ScaleHorizontal: 0.2, $ScaleVertical: 0.1, $Opacity: 2, $Round: {$Top: 1.3}};
        _CaptionTransitions["TORTUOUS|VB"] = {$Duration: 1200, $Clip: 15, $FlyDirection: 8, $Easing: {$Top: $JssorEasing$.$EaseOutWave, $Clip: $JssorEasing$.$EaseOutCubic}, $ScaleVertical: 0.2, $During: {$Top: [0, 0.7]}, $Round: {$Top: 1.3}};
        _CaptionTransitions["FADE"] = {$Duration: 600, $Opacity: 2};
        _CaptionTransitions["ZMF|10"] = {$Duration: 600, $Zoom: 11, $Easing: {$Zoom: $JssorEasing$.$EaseInExpo, $Opacity: $JssorEasing$.$EaseLinear}, $Opacity: 2};
        _CaptionTransitions["RTT|10"] = {$Duration: 600, $Zoom: 11, $Rotate: true, $Easing: {$Zoom: $JssorEasing$.$EaseInExpo, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInExpo}, $Opacity: 2, $Round: {$Rotate: 0.8}};
        _CaptionTransitions["RTTL|BR"] = {$Duration: 600, $Zoom: 11, $Rotate: true, $FlyDirection: 10, $Easing: {$Left: $JssorEasing$.$EaseInExpo, $Top: $JssorEasing$.$EaseInExpo, $Zoom: $JssorEasing$.$EaseInExpo, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInExpo}, $ScaleHorizontal: 0.6, $ScaleVertical: 0.6, $Opacity: 2, $Round: {$Rotate: 0.8}};

        var options = {
            $AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
            $AutoPlaySteps: 1, //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
            $AutoPlayInterval: 4000, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
            $PauseOnHover: 1, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 1

            $ArrowKeyNavigation: true, //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
            $SlideDuration: 500, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
            $MinDragOffsetToSlide: 20, //[Optional] Minimum drag offset to trigger slide , default value is 20
            //$SlideWidth: 600,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
            //$SlideHeight: 300,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container
            $SlideSpacing: 0, //[Optional] Space between each slide in pixels, default value is 0
            $DisplayPieces: 1, //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
            $ParkingPosition: 0, //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
            $UISearchMode: 1, //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
            $PlayOrientation: 1, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, default value is 1
            $DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)

            $SlideshowOptions: {//[Optional] Options to specify and enable slideshow or not
                $Class: $JssorSlideshowRunner$, //[Required] Class to create instance of slideshow
                $Transitions: _SlideshowTransitions, //[Required] An array of slideshow transitions to play slideshow
                $TransitionsOrder: 1, //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
                $ShowLink: true                                    //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
            },
            $CaptionSliderOptions: {//[Optional] Options which specifies how to animate caption
                $Class: $JssorCaptionSlider$, //[Required] Class to create instance to animate caption
                $CaptionTransitions: _CaptionTransitions, //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
                $PlayInMode: 1, //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
                $PlayOutMode: 3                                 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
            },
            $BulletNavigatorOptions: {//[Optional] Options to specify and enable navigator or not
                $Class: $JssorBulletNavigator$, //[Required] Class to create navigator instance
                $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
                $ActionMode: 3, //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
                $Lanes: 2, //[Optional] Specify lanes to arrange items, default value is 1
                $SpacingX: 10, //[Optional] Horizontal space between each item in pixel, default value is 0
                $SpacingY: 10                                    //[Optional] Vertical space between each item in pixel, default value is 0
            },
            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
                $ChanceToShow: 1                                //[Required] 0 Never, 1 Mouse Over, 2 Always
            },
            $ThumbnailNavigatorOptions: {
                $Class: $JssorThumbnailNavigator$, //[Required] Class to create thumbnail navigator instance
                $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
                $ActionMode: 0, //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
                $DisableDrag: true, //[Optional] Disable drag or not, default value is false
                $Orientation: 2                                 //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1
            }
        };

        var jssor_slider1 = new $JssorSlider$("slider1_container", options);
        //responsive code begin
        //you can remove responsive code if you don't want the slider scales while window resizes
        function ScaleSlider() {
            var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
            if (parentWidth)
                jssor_slider1.$SetScaleWidth(Math.min(parentWidth, 600));
            else
                window.setTimeout(ScaleSlider, 30);
        }

        ScaleSlider();

        if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
            $(window).bind('resize', ScaleSlider);
        }
    });
</script>